<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--http://localhost:8080/jdbc/html/regular/regular.html-->
    <title></title>
    <style>

        /*这个是居中关键否则.login 中   top: 50%;会不起作用,但是有的界面没写也不会有影响*/
        html, css {
            width: 100%;
            height: 100%;
        }

        body {
            background: rgba(238, 238, 238, 0.5);
            position: relative;
            font-family: 微软雅黑;
            background-color: lightblue;
            height: 100%;
        }

        /*
        1.使用绝对定位,
        2.使用top left
        3.再使用margin-top margin-left
        */
        .login {
            width: 450px;
            height: 380px;

            background: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -225px;
            margin-top: -190px;
        }


    </style>
</head>


<body>
<div class="login">水平左右居中用text-align: center
    上下垂直居中,父元素设置行高 line-height,或者弹性盒子模型
</div>
</body>
</html>